<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>距离量算</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }

        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src='../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
        var map, local, layer, drawLine, lineLayer;
        style = {
            strokeColor: "#304DBE",
            strokeWidth: 2,
            pointerEvents: "visiblePainted",
            fillColor: "#304DBE",
            fillOpacity: 0.8
        },
                url=host+"/iserver/services/map-world/rest/maps/World";
        function init(){
            //新建线矢量图层
            lineLayer = new SuperMap.Layer.Vector("lineLayer");
            //对线图层应用样式style（前面有定义）
            lineLayer.style = style;


            //创建画线控制，图层是lineLayer;这里DrawFeature(图层,类型,属性)；multi:true在将要素放入图层之前是否现将其放入几何图层中
            drawLine = new SuperMap.Control.DrawFeature(lineLayer, SuperMap.Handler.Path, { multi: true });

            /*
             注册featureadded事件,触发drawCompleted()方法
             例如注册"loadstart"事件的单独监听
             events.on({ "loadstart": loadStartListener });
             */
            drawLine.events.on({"featureadded": drawCompleted});
            //定义layer图层，TiledDynamicRESTLayer：分块动态 REST 图层
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });
            //为图层初始化完毕添加addLayer()事件
            layer.events.on({"layerInitialized":addLayer});
            map = new SuperMap.Map("map",{controls: [
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }}),
                drawLine]
            });
        }

        function addLayer() {
            map.addLayers([layer, lineLayer]);
            map.setCenter(new SuperMap.LonLat(0, 0), 0);
        }
        function distanceMeasure(){
            clearFeatures();
            drawLine.activate();
        }


        //绘完触发事件
        function drawCompleted(drawGeometryArgs) {
            //停止画面控制
            drawLine.deactivate();
            //获得图层几何对象
            var geometry = drawGeometryArgs.feature.geometry,
                    measureParam = new SuperMap.REST.MeasureParameters(geometry), /* MeasureParameters：量算参数类。 客户端要量算的地物间的距离或某个区域的面积*/
                    myMeasuerService = new SuperMap.REST.MeasureService(url); //量算服务类，该类负责将量算参数传递到服务端，并获取服务端返回的量算结果
            myMeasuerService.events.on({ "processCompleted": measureCompleted });

            //对MeasureService类型进行判断和赋值，当判断出是LineString时设置MeasureMode.DISTANCE，否则是MeasureMode.AREA

            myMeasuerService.measureMode = SuperMap.REST.MeasureMode.DISTANCE;

            myMeasuerService.processAsync(measureParam); //processAsync负责将客户端的量算参数传递到服务端。
        }

        //测量结束调用事件
        function measureCompleted(measureEventArgs) {
            var distance = measureEventArgs.result.distance;
            var  unit = measureEventArgs.result.unit;
            alert("量算结果:"+distance + "米");
        }

        //移除图层要素
        function clearFeatures(){
            lineLayer.removeAllFeatures();
        }
    </script>
</head>
<body onload="init()">
<div id="toolbar">
    <input type="button" class="btn" value="距离量算" onclick="distanceMeasure()" />
    <input type="button" class="btn" value="清除" onclick="clearFeatures()" />
</div>
<div id="map"></div>
</body>
</html>
